import defaultAnonymousPng from '@/assets/imgs/default_anonymous.png'; //头像
import defaultAvatarpng from '@/assets/imgs/default_avatar.png';
import defaultDepartmentpng from '@/assets/imgs/default_department.png'; //部门
import defaultEnterprisepng from '@/assets/imgs/default_enterprise.png'; //企业
import { UserOutlined } from '@ant-design/icons';
import { Popover, Space } from 'antd';
import { YmAvatar } from 'ym-design';

function YmAvatarPage() {
  return (
    <Space direction="vertical">
      <p>
        <span>字体antd：</span>
        <Popover
          content="请确保 Tooltip 的子元素能接受 onMouseEnter、onMouseLeave、onFocus、onClick 事件"
          trigger="hover"
        >
          <span>
            <YmAvatar>张一捷</YmAvatar>
          </span>
        </Popover>
      </p>

      <p>
        <span>字体：</span>
        <YmAvatar>捷</YmAvatar>
      </p>
      <p>
        <span>icon：</span>
        <YmAvatar icon={<UserOutlined />} />
      </p>
      <p>
        <span>匿名头像：</span>
        <YmAvatar src={defaultAnonymousPng} />
      </p>

      <p>
        <span>默认头像：</span>
        <YmAvatar src={<img src={defaultAvatarpng} />} />
      </p>
      <p>
        <span>默认部门像：</span>
        <YmAvatar src={defaultDepartmentpng} />
      </p>

      <p>
        <span>默认企业像：</span>
        <YmAvatar src={defaultEnterprisepng} />
      </p>
      <p>
        <span>shape:square：</span>
        <YmAvatar shape="square">张一捷</YmAvatar>
      </p>
    </Space>
  );
}

export default YmAvatarPage;
